<template>
	<view class="lee-wrap">
		<view class="p10">
			<u--input prefixIcon="search" placeholder="请输入商品名称" border="none" shape="circle"
				:customStyle="{background:'#f5f5f5',height:'60rpx',paddingLeft:'20rpx'}" v-model="params.store_name"
				@input="toSearch">
			</u--input>
		</view>
		<view class="container">
			<scroll-view scroll-y scroll-with-animation class="lee-tab-view menu-scroll-view bf5"
				:scroll-top="scrollTop" :scroll-into-view="itemId">
				<view v-for="(item,index) in typeList" :key="index" class="lee-tab-item"
					:class="[current == index ? 'lee-tab-item-active' : '']"
					:style="{color:current==index?'#000':'',fontWeight:current==index?'bold':''}"
					@click.stop="swichMenu(index)">
					<text class="u-line-1">{{item.label}}</text>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
				@scrolltolower="scrolltolower" :refresher-triggered="triggered">
				<view class="page-view">
					<view class="class-item" :id="'item' + index" v-for="(item , index) in tableData" :key="index">
						<view class="card c3 mb10 cshow">
							<view class="content">
								<view class="content_right">
									<view class="content-text" style="font-size: 36rpx;font-weight: 600;">
										#{{ item.order_no }}
									</view>
									<view class="content-text">门店名称：{{item.store_name}}</view>
									<view class="content-text">商品名称：{{item.product_name}}</view>
									<view class="content-text" style="display: flex;align-items: center;">分账状态：
										<u-tag :type="is_dy_comList[item.is_dy_com].type" size="mini" plain
											:text="is_dy_comList[item.is_dy_com].name">
										</u-tag>
									</view>
									<view class="content-text" v-if="item.is_dy_com == 3">分账错误信息：{{item.product_name}}
									</view>
									<view class="content-text">下单时间：{{item.create_time}}
									</view>
									<view class="content-text" v-if="item.settle_success_time">
										分账时间：{{item.settle_success_time}}</view>
									<view class="content-text">支付金额：{{item.total_amount}}</view>
									<view class="content-text">门店佣金：{{item.store_price}}</view>
									<view class="content-text">平台佣金：{{item.oem_price}}</view>
									<view class="content-text">上级服务商佣金：{{item.agent_price}}</view>
									<view class="content-text">直属服务商佣金：{{item.partner_price}}</view>
									<view class="content-text">cps佣金：{{item.cps_price}}</view>
									<view class="content-text">抖音佣金：{{item.dy_price}}</view>
									<view class="content-text">总佣金：{{item.total_com}}</view>
								</view>
							</view>
						</view>
					</view>
					<view style="width: 100%;height: 120rpx;"></view>
				</view>
				<view v-if="tableData.length==0" class="np f-c-c">
					<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
					<view class="f12 cb mt20">暂无明细</view>
				</view>
			</scroll-view>
		</view>
		<view class="navbar2 bt f-row">
			<view class="f-c" style="width: 168rpx;background: #FBFBFB;">分佣设置</view>
			<view class="f-1 f-row bf">
				<template v-for="(v, index) in navs">
					<view class="f-1 f-y-c" @click="djTab(v)">
						<view class="wh f-c f-y-c">
							<uni-icons :type="v.type" :color="subject_color" size="22"></uni-icons>
							<view class="">{{ v.t }}</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<u-calendar :show="calendarShow1" mode="range" :showMark="true" @confirm="confirm" :closeOnClickOverlay="true"
			@close="calendarShow1=false" monthNum="13" :minDate="minDate" :maxDate="maxDate"
			:defaultDate="defaultDate"></u-calendar>
		<u-calendar :show="calendarShow" mode="range" :showMark="true" @confirm="confirm2" :closeOnClickOverlay="true"
			@close="calendarShow = false" monthNum="13" :minDate="minDate" :maxDate="maxDate"
			:defaultDate="defaultDate"></u-calendar>
	</view>
</template>

<script>
	import config from '@/custom/config.js';
	export default {
		data() {
			return {
				typeList: [{
						label: '全部',
						value: 0,
					},
					{
						label: '未分账',
						value: 1,
					},
					{
						label: '分帐中',
						value: 2,
					},
					{
						label: '分账成功',
						value: 3,
					},
					{
						label: '分账失败',
						value: 4,
					}
				],
				current: 0, // 预设当前项的值
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				triggered: true,
				itemId: '', // 栏目右边scroll-view用于滚动的id
				params: {
					end_date: "",
					end_settle_date: "",
					is_alipay_error: 0,
					is_dy_com: "",
					limit: 10,
					order_no: "",
					page: 1,
					phone: "",
					product_name: "",
					settle_date: "",
					start_date: "",
					store_name: "",
				},
				zongjiObj: {},
				tableData: [],
				is_dy_comList: {
					'0': {
						type: 'warning',
						name: '未分账',
					},
					'1': {
						type: 'info',
						name: '分账中',
					},
					'2': {
						type: 'success',
						name: '分账成功',
					},
					'3': {
						type: 'error',
						name: '分账失败',
					},
				},
				navs: [{
						t: '导出明细',
						type: 'download'
					},
					{
						t: '查看总计',
						type: 'eye'
					},
					{
						t: '时间筛选',
						type: 'calendar'
					},
				],
				hasLoadedData: false,
				subject_color: uni.getStorageSync("subject_color"),
				calendarShow1: false,
				calendarShow: false,
				minDate: '',
				maxDate: '',
				defaultDate: []
			}
		},
		methods: {
			// 点击左边的栏目切换
			async swichMenu(index) {
				if (index == 0) {
					this.params.is_dy_com = '';
				} else {
					this.params.is_dy_com = index - 1;
				}
				this.current = index;
				this.params.page = 1;
				this.hasLoadedData = false;
				this.tableData = []
				this.getOrderCommission()
			},
			getOrderCommission() {
				uni.showLoading()
				this.beg.request({
					url: '/admin/order.Order/get_settle_order_table',
					method: 'post',
					data: this.params
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						res.data.data.forEach((v) => {
							v.store_price = v.store_price / 100
							v.product_store_price = v.product_store_price / 100
							v.partner_price = v.partner_price / 100
							v.agent_price = v.agent_price / 100
							v.total_amount = v.total_amount / 100

							v.oem_price = v.oem_price / 100
							v.dy_price = v.dy_price / 100
							v.cps_price = v.cps_price / 100
							v.total_com = v.total_com / 100
						})
						let newData = res.data.data
						if (!this.hasLoadedData) {
							this.tableData = newData;
							this.hasLoadedData = true;
						} else {
							this.tableData = this.tableData.concat(newData);
						}
						this.zongjiObj = res.data.sum_data;
					}
				})
			},
			scrolltolower() {
				this.params.page++
				this.getOrderCommission()

			},
			djTab(val) {
				if (val.t == '导出明细') {
					this.calendarShow1 = true
				} else if (val.t == '查看总计') {
					uni.showModal({
						content: '支付金额：' + '￥' + this.zongjiObj.total_amount.toFixed(2) +
							'\r\n门店佣金：' + '￥' + this.zongjiObj.store_price.toFixed(2) +
							'\r\n平台佣金：' + '￥' + this.zongjiObj.oem_price.toFixed(2) +
							'\r\n上级服务商佣金：' + '￥' + this.zongjiObj.agent_price.toFixed(2) +
							'\r\n直属服务商佣金：' + '￥' + this.zongjiObj.partner_price.toFixed(2) +
							'\r\ncps佣金：' + '￥' + this.zongjiObj.cps_price.toFixed(2) +
							'\r\n抖音佣金：' + '￥' + this.zongjiObj.dy_price.toFixed(2) +
							'\r\n总佣金：' + '￥' + this.zongjiObj.total_com.toFixed(2),
						showCancel: false
					});
				} else {
					this.calendarShow = true
				}
			},
			confirm(e) {
				uni.showLoading()
				this.calendarShow1 = false
				var adminInfo = uni.getStorageSync("adminInfo")
				this.params.start_date = e[0]
				this.params.end_date = e[1]
				uni.request({
					url: 'https://life.kdsh.cc/admin/order.ExcelOut/exportSettleData',
					data: this.params,
					method: "POST",
					header: {
						Accept: "application/json, text/plain, */*",
						contentType: config.contentType,
						agentId: adminInfo.agent_id,
						batoken: adminInfo.token,
						chainStoresId: adminInfo.chain_stores_id,
						oemId: adminInfo.oem_id,
						partnerId: adminInfo.partner_id,
						server: "true",
						storeId: adminInfo.store_id,
						thinkLang: "zh-cn",
					},
					responseType: 'arraybuffer',
					success(res) {
						const now = new Date();
						const fileName = now.toISOString() + '.xlsx';
						const arrayBuffer = res.data; // utf-8编码的文件数据
						const base64String = uni.arrayBufferToBase64(arrayBuffer);
						const buffer = uni.base64ToArrayBuffer(base64String);
						let fs = uni.getFileSystemManager();
						const filePath = wx.env.USER_DATA_PATH + '/' + fileName;
						fs.writeFile({
							filePath: filePath,
							data: buffer,
							encoding: 'binary',
							success: (res) => {
								uni.hideLoading()
								console.log('文件保存成功', res);
								uni.openDocument({
									filePath: filePath,
									showMenu: true,
									success: (res) => {
										console.log('文件预览成功');
										// 构建分享内容
									},
									fail: (error) => {
										console.error('文件保存失败', error);
									}
								})

							},
							fail(err) {
								uni.hideLoading()
								console.log(err);
							}

						})
					}
				})
			},
			confirm2(e) {
				this.calendarShow = false
				this.params.start_date = e[0]
				this.params.end_date = e[1]
				this.params.page = 1
				this.params.product_name = ''
				this.hasLoadedData = false;
				this.getOrderCommission()
			},
			toSearch() {
				this.hasLoadedData = false;
				this.params.page = 1
				this.getOrderCommission()
			},
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month <= 9) {
					month = '0' + month;
				}
				if (day <= 9) {
					day = '0' + day;
				}
				let minyear = year - 1;
				this.minDate = minyear + '-' + month + '-' + day;
				let maxyear = year + 1;
				this.maxDate = year + '-' + month + '-' + day;
				this.defaultDate[0] = year + '-' + month + '-' + day;
			}
		},
		onLoad() {
			this.getOrderCommission()
			this.chooseTimed()
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	$lee-tab-item-active: #c6ebff;

	.lee-wrap {
		height: 100%;
	}

	.container {
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex: 1;
		height: 100%;
	}

	.lee-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.lee-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.lee-tab-item-active {
		position: relative;
		font-size: 24rpx;
		font-weight: 500;
		background: #fff;
	}

	.page-view {
		background-color: #fff;
		padding: 16rpx;
	}

	.class-item {
		padding: 5rpx 5rpx;
		border-radius: 8rpx;
	}

	.navbar2 {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		box-shadow: 0 0rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.content-text {
		margin-top: 10rpx;
	}
</style>